<template>
  <div>
    <header-m></header-m>
    <div class="form">
      <el-form :model="baseInfo" ref="baseForm" :rules="Rules">
        <el-form-item label="身份证：" prop="idCard">
          <el-input v-model="baseInfo.idCard" />
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="baseInfo.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="submit" class="denglu" >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import headerM from "../components/HeaderM";
export default {
  data() {
    return {
      Rules: {
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
          { pattern: /(^\d{17}(\d|X|x)$)/, message: "身份证不符合规范" },
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { pattern: /^[\u4e00-\u9fa5$]{2,13}$/, message: "姓名不符合规范" },
        ],
      },
      baseInfo: {
          idCard:"",
          name:""
      },
    };
  },
  methods: {},
  components: {
    headerM,
  },
};
</script>
<style scoped>
.form{
    margin-top: 10px;
}
.form >>> .el-form-item {
  margin: 0;
  height: 60px;
}
.form >>> .el-form-item .el-form-item__label {
  float: left;
  width: 25%;
  font-size: 16px;
  text-align: right;
  padding-top: 5px;
}
.form >>> .el-form-item .el-form-item__content {
  float: right;
  width: 70%;
  height: 30px;
  margin-right: 5%;
}
.form >>> .el-form-item .el-form-item__content .el-form-item__error {
  top: 40px;
  left: 20px;
}

.form >>> .el-form-item .el-form-item__content .el-input__inner {
  border-top: transparent;
  border-left: transparent;
  border-radius: 0;
  height: 30px;
  width: 90%;
  border-right: transparent;
  font-size: 18px;
  padding-top: 0;
}
.form .denglu {
  width: 80%;
  margin-right: 20%;
  background-image: linear-gradient(90deg, #ff4aae, #ff1268);
  color: white;
  font-size: 18px;
  border: none;
}
</style>